<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="108px">

        <el-form-item label="项目名：" prop="name">
          {{ this.queryParams.projectName }}
        </el-form-item>

        <el-form-item label="问卷名">
          {{ this.queryParams.questionnaireName }}
        </el-form-item>
        <br>

        <el-form-item label="可投票数">
          {{ this.queryParams.voteNum }}
        </el-form-item>

        <el-form-item label="投票时间">
          {{ this.queryParams.startTime }} ——— {{ this.queryParams.endTime }}
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
            v-hasPermi="['lxy:route:add']">投票</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete"
            v-hasPermi="['lxy:project:remove']">不参加疗休养</el-button>
        </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>




      <el-table v-loading="loading" :data="routeList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="路线名" align="center" prop="name" width="150px" />
        <el-table-column label="描述" align="center" prop="content" width="380px" />
        <el-table-column label="注意事项" align="center" prop="notice" />
        <el-table-column label="出行区域" align="center" prop="area" width="80px" />
        <el-table-column label="预算" align="center" prop="budget" width="80px" />
        <el-table-column label="携带家属" align="center" prop="canBring" width="80px" />


        <!-- <el-table-column label="照片集,oss" align="center" prop="pic" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.pic" :width="50" :height="50"/>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-eleme">
              <a :href="scope.row.url" target="_blank" class="buttonText">链接</a>
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)"
              v-hasPermi="['lxy:route:edit']">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 添加或修改路线对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="type === 0">
          <el-form-item label="项目名" prop="projectId">

            {{ this.queryParams.projectName }}

          </el-form-item>

          <el-form-item label="旅行社" prop="travelagenId">
            <el-select v-model="form.travelagenId" placeholder="请选择旅行社">
              <el-option v-for="item in travelagenOptions" :key="item.id" :label="item.agencyName" :value="item.id"
                :multiple=false></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="路线名" prop="name">
            <el-input v-model="form.name" placeholder="请输入路线名" />
          </el-form-item>
          <el-form-item label="描述">
            <editor v-model="form.content" :min-height="192" />
          </el-form-item>
          <el-form-item label="注意事项" prop="notice">
            <el-input v-model="form.notice" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="链接详情地址" prop="url">
            <el-input v-model="form.url" placeholder="请输入链接详情地址" />
          </el-form-item>
          <el-form-item label="选择出行区域" prop="area">
            <el-radio-group v-model="form.area">
              <el-radio label="省内">省内</el-radio>
              <el-radio label="省外">省外</el-radio>
              <el-radio label="国外">国外</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预算" prop="budget">
            <el-input v-model="form.budget" placeholder="请输入预算" />
          </el-form-item>
          <el-form-item label="携带家属" prop="canBring">
            <el-radio-group v-model="form.canBring">
              <el-radio label="允许">允许</el-radio>
              <el-radio label="不允许">不允许</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否专属" prop="allowUnified">
            <el-radio-group v-model="form.allowUnified">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="专属部门id" prop="departmentNo">
            <el-input v-model="form.departmentNo" placeholder="请输入专属部门id" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-input v-model="form.status" placeholder="请输入状态" />
          </el-form-item>
          <el-form-item label="照片集,oss" prop="pic">
            <image-upload v-model="form.pic" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="type === 0">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>




    </div>
  </template>

  <script>
  import { listRoute } from "@/api/lxy/route";
  import { addQuestionnaireReslut } from "@/api/lxy/questionnaireReslut";
  import { listQuestionnaire, getQuestionnaireByProjectId } from "@/api/lxy/questionnaire";

  export default {
    name: "QuestionnaireReslut",
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 问卷结果表格数据
        questionnaireReslutList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: undefined,
          pageSize: undefined,
          questionnaireId: undefined,
          userId: undefined,
          isAttend: undefined,
          intendedRoute: undefined,
          isBringdepe: undefined,
          dependentNum: undefined,
        },
        // 表单参数
        form: {},
        xAxisData: [],
        yAxisData: [],

        votePeopleSum: 0,
        dependentVoteSum: 0,
        voteSum: 0,
      };
    },
    created() {
      this.getList();
      this.getQuestionnaireList();
      // this.getVotes();
    },
    methods: {
      /** 查询问卷结果列表 */
      getList() {

        this.queryParams.projectId = this.$route.query.projectId;
        this.queryParams.projectName = this.$route.query.projectName;
        this.queryParams.questionnaireId = this.$route.query.questionnaireId;


        this.loading = true;
        listRoute(this.queryParams).then(response => {
          this.routeList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      getQuestionnaireList() {
        this.loading = true;
        getQuestionnaireByProjectId(this.queryParams.projectId).then(response => {
          this.queryParams.questionnaireName = response.data.name;
          this.queryParams.voteNum = response.data.voteNum;
          this.queryParams.startTime = response.data.startTime
          this.queryParams.endTime = response.data.endTime;
          this.loading = false;
        });
      },

      /** 不参与疗休养项目 */
      handleDelete() {
        this.$modal.confirm('是否确认不参与本次疗休养项目"').then(() => {
          this.loading = true;
          this.form.questionnaireId = this.queryParams.questionnaireId;

          addQuestionnaireReslut(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });

          return delQuestionnaire(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        }).finally(() => {
          this.loading = false;
        });
      },

    }
  };
  </script>


  <style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>
